@use "@/common/styles/colors"

.sidebar
  width: 5rem
  user-select: none
  background-color: colors.$lighter-background
  height: 100%
  display: flex
  flex-direction: column
  align-items: center
  border-right: 2px solid colors.$dark-gray
  overflow: hidden
  transition: all 0.2s
  left: 0
  top: 0
  z-index: 10

  &.collapsed
    margin-left: -5rem
    position: absolute

    &:hover
      margin-left: 0
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2)

  .sidebar-top
    display: flex
    flex-direction: column
    align-items: center
    flex: 1
    overflow: hidden

  img
    margin-top: 0.5rem
    width: 3.5rem
    height: 3.5rem
    cursor: pointer

  hr
    background-color: colors.$dark-gray
    width: 50%
    margin: 1rem 0
    border: none
    height: 2px
    border-radius: 1rem

  nav
    display: flex
    flex-direction: column
    gap: 1rem
    overflow-y: auto
    flex: 1
    align-items: center
    width: 100%
    scrollbar-width: none
    -ms-overflow-style: none

    &::-webkit-scrollbar
      display: none

    .nav-item
      width: 3.75rem
      height: 3.75rem
      flex-shrink: 0
      display: flex
      justify-content: center
      align-items: center
      color: colors.$white
      border: 1px solid transparent
      border-radius: 1rem
      transition: all 0.2s
      cursor: pointer

      svg
        width: 2.5rem
        height: 2.5rem

      &:hover:not(.nav-item-disabled)
        color: colors.$primary

      &.nav-item-active
        background-color: colors.$dark-gray
        border: 1px solid colors.$gray
        color: colors.$primary

      &.nav-item-disabled
        opacity: 0.5
        cursor: not-allowed

  .log-out-area
    border-top: 2px solid colors.$dark-gray
    width: 100%
    height: 3rem
    display: flex
    justify-content: center
    align-items: center
    padding: 0.5rem
    flex-shrink: 0

    .log-out-btn
      cursor: pointer

      svg
        width: 2rem
        height: 2rem

      &:hover
        color: colors.$error